// 定义转换函数
@function px2rpx($size) {
  @return $size * 2rpx;
}

// 生成字体类
@for $i from 1 through 30 {
  .font-#{$i} {
    font-size: px2rpx($i);
  }
}

// 常用尺寸数组
$sizes: (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96);

// 生成宽度类
@each $size in $sizes {
  .width-#{$size} {
    width: px2rpx($size);
  }
}

// 生成高度类
@each $size in $sizes {
  .height-#{$size} {
    height: px2rpx($size);
  }
}

// 生成圆角类
@for $i from 1 through 100 {
  .radius-#{$i} {
    border-radius: px2rpx($i);
  }

  .pradius-#{$i} {
    border-radius: ($i * 1%);
  }

  .pt-#{$i} {
    padding-top: px2rpx($i);
  }

  .pl-#{$i} {
    padding-left: px2rpx($i);
  }

  .pr-#{$i} {
    padding-right: px2rpx($i);
  }

  .pb-#{$i} {
    padding-bottom: px2rpx($i);
  }

  .mt-#{$i} {
    margin-top: px2rpx($i);
  }

  .ml-#{$i} {
    margin-left: px2rpx($i);
  }

  .mr-#{$i} {
    margin-right: px2rpx($i);
  }

  .mb-#{$i} {
    margin-bottom: px2rpx($i);
  }
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-cloumn {
  flex-direction: column;
}

.font-medium {
  font-weight: 500;
}

.font-bold {
  font-weight: bold;
}
